import React, { useState } from 'react';
import { Form, Input, Modal, Radio,DatePicker } from 'antd';
import moment from 'moment'

const FormItem = Form.Item;

export interface UpdateFormProps {
  onCancel: () => void;
  onSubmit: (values: API.DeviceLinkageItem,resetForm:()=>void) => void;
  updateModalVisible: boolean;
  values: API.RoleItem;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  
  const [formVals] = useState<API.DeviceLinkageItem>(props.values);

  const [form] = Form.useForm();

  const { updateModalVisible, onSubmit: handleUpdate, onCancel } = props;
  const [isSuspend,setIsSuspend] = useState<number|undefined>(formVals.isSuspend);
  
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.id = formVals.id;
    if (fieldsValue.suspendTime) {
      fieldsValue.suspendTime = fieldsValue.suspendTime.format('YYYY-MM-DD HH:mm:ss');
    }
    handleUpdate(fieldsValue,resetForm);
 
  }

  const resetForm= async () => {
    setIsSuspend(0);
    form.resetFields();
  };

  return (
    <Modal
      width={640}
     
      destroyOnClose
      title="编辑任务"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >


   <Form {...formLayout}
        form={form}
        initialValues={{...formVals,...{"suspendTime":formVals.suspendTime!=null?moment(formVals.suspendTime):formVals.suspendTime}}}>
        <FormItem
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入至少二个字符！', min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="描述"
          name="memo"
        >
          <Input.TextArea rows={4} placeholder="请输入" />
        </FormItem>
        
        <FormItem
          label="状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
             不启用
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="是否暂停"
          name="isSuspend"
        >
          <Radio.Group  onChange={(e)=>{setIsSuspend(e.target.value)}}>
            <Radio value={0} >
              不暂停
            </Radio>
            <Radio value={1}>
              暂停
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="暂停截止时间"
          name="suspendTime"
          style={{display:isSuspend==1?'flex':'none'}}
          rules={[{ required:(isSuspend==1?true:false), message: '请选择暂停截止时间' }]}
        >
          <DatePicker  format="YYYY-MM-DD HH:mm:ss"   showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }} placeholder='暂停截止时间' style={{ width: '100%' }} />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default UpdateForm;
